<script lang="ts">
export default {
  name: 'manage',
};
</script>

<script lang="ts" setup>

import {onMounted, reactive, ref, toRefs} from 'vue';
import {ElMessage, ElMessageBox} from 'element-plus';

import RepoProductEntityTable from './components/RepoProductEntityTable.vue';
import RepoProductEntityHeader from './components/RepoProductEntityHeader.vue';
import RepoProductEntityDialog from './components/RepoProductEntityDialog.vue';
import RepoProductCompDialog from './components/RepoProductCompDialog.vue';


// 引入设备的API和数据类型
import {
  CreateRepoProductRequestVO,
  RepoProductQueryParam,
} from '@/api/cloud/repository/repoproduct/types';
import {
  createRepoProductEntity,
  updateRepoProductEntity,
  deleteRepoProductEntity,
  deleteRepoProductComp,
  createRepoProductComp, updateRepoProductComp
} from "@/api/cloud/repository/repoproduct";


const repoProductEntityTableRef = ref<any>(); // 这了的变量名称必须和<console-edit-dialog>的ref值一样
const repoProductEntityHeaderRef = ref<any>(); // 这了的变量名称必须和<console-edit-dialog>的ref值一样
const repoProductEntityDialogRef = ref<any>(); // 这了的变量名称必须和<console-edit-dialog>的ref值一样
const repoProductCompDialogRef = ref<any>(); // 这了的变量名称必须和<console-edit-dialog>的ref值一样

const state = reactive({
  // 查询参数
  queryParams: {pageNum: 1, pageSize: 10} as RepoProductQueryParam,
  // 对话框状态
  editDialog: {
    visible: false,
  },
  // 对话框状态
  compDialog: {
    visible: false,
  },
});

const {
  // 查询参数
  queryParams,
  // 对话框状态
  editDialog,
  // 对话框状态
  compDialog,
} = toRefs(state);


function handleCreateDialog(source: string, type: any) {
  // 创建对话框
  if (source === 'header' && type === 'create') {
    editDialog.value.visible = true;
    repoProductEntityDialogRef.value.initEditData(type, undefined);
    return;
  }
}

/**
 * 捕获来自对话框的创建操作
 * @taskParam value
 */
async function handleCreate(value: any) {
  let formData = {
    manufacturer: value.manufacturer,
    deviceType: value.deviceType,
    image: value.image,
    url: value.url,
    tags: value.tags,
    description: value.description,
  }

  await createRepoProductEntity(formData).then(() => {
    ElMessage.success('新增成功');
    // 隐藏对话框
    editDialog.value.visible = false;
    // 刷新表单
    repoProductEntityTableRef.value.refreshTable(state.queryParams);
  })
}

async function handleUpdate(value: any) {
  let formData = {
    uuid: value.uuid,
    manufacturer: value.manufacturer,
    deviceType: value.deviceType,
    image: value.image,
    url: value.url,
    tags: value.tags,
    description: value.description,
  }

  await updateRepoProductEntity(formData).then(() => {
    ElMessage.success('更新成功');
    // 隐藏对话框
    editDialog.value.visible = false;
    // 刷新表单
    repoProductEntityTableRef.value.refreshTable(state.queryParams);
  })
}

function handleUpdateDialog(source: string, type: any, value: any) {
  if (source === 'table' && type === 'update') {
    if (value === undefined) {
      return;
    }

    // 初始化编辑对话框的数据
    repoProductEntityDialogRef.value.initEditData(type, value);
    // 显示对话框
    editDialog.value.visible = true;
  }
}

function handleDeleteDialog(source: any) {
  let data = {} as CreateRepoProductRequestVO;
  data.uuid = source.uuid;

  ElMessageBox.confirm('确认删除?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteRepoProductEntity(data).then(() => {
      ElMessage.success('删除成功');
      // 刷新表单
      repoProductEntityTableRef.value.refreshTable(state.queryParams);
    });
  })
      .catch(() => ElMessage.info('已取消删除'));

}

function handleDeleteComp(source: any) {
  let data = {} as CreateRepoProductRequestVO;
  data.productId = source.productId;
  data.uuid = source.uuid;

  ElMessageBox.confirm('确认删除?', '警告', {
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    type: 'warning',
  }).then(() => {
    deleteRepoProductComp(data).then(() => {
      ElMessage.success('删除成功');
      // 刷新表单
      repoProductEntityTableRef.value.refreshTable(state.queryParams);
    });
  })
      .catch(() => ElMessage.info('已取消删除'));

}

async function handleInsertComp(source: string, row: any) {
  // 创建对话框
  compDialog.value.visible = true;
  repoProductCompDialogRef.value.initEditData('create', row);
}

async function handleUpdateComp(row: any) {
  // 创建对话框
  compDialog.value.visible = true;
  repoProductCompDialogRef.value.initEditData('update', row);
}

/**
 * 捕获来自对话框的创建操作
 * @taskParam value
 */
async function handleCompCreate(value: any) {
  let formData = {
    productId: value.productId,
    modelName: value.modelName,
    modelType: value.modelType,
    modelVersion: value.modelVersion,
    version: value.version,
    stage: value.stage,
  }

  await createRepoProductComp(formData).then(() => {
    ElMessage.success('创建成功');
    // 隐藏对话框
    compDialog.value.visible = false;
    // 刷新表单
    repoProductEntityTableRef.value.refreshTable(state.queryParams);
  })
}

/**
 * 捕获来自对话框的创建操作
 * @taskParam value
 */
async function handleCompUpdate(value: any) {
  let formData = {
    productId: value.productId,
    uuid: value.uuid,
    modelName: value.modelName,
    modelType: value.modelType,
    modelVersion: value.modelVersion,
    version: value.version,
    stage: value.stage,
  }


  await updateRepoProductComp(formData).then(() => {
    ElMessage.success('更新成功');
    // 隐藏对话框
    compDialog.value.visible = false;
    // 刷新表单
    repoProductEntityTableRef.value.refreshTable(state.queryParams);
  })
}

/**
 * 捕获对话框的取消操作
 * @taskParam value
 */
function handleCompCancel() {
  // 隐藏对话框
  compDialog.value.visible = false;
}


/**
 * 捕获对话框的取消操作
 * @taskParam value
 */
function handleCancel() {
  // 隐藏对话框
  editDialog.value.visible = false;
}

/**
 * 响应查询按钮：页查询数据
 */
function handleQuery(source: string, value: any) {
  queryParams.value = value;
  repoProductEntityTableRef.value.refreshTable(queryParams);
}

/**
 * 响应页面安装：页面的初始化工作
 */
onMounted(() => {
});
</script>

<template>
  <div class="app-container">

    <!-- 表单头：各种按钮 -->
    <repo-product-entity-header ref="repoProductEntityHeaderRef"
                                @create="handleCreateDialog"
                                @query="handleQuery"
    />

    <!-- 数据表单：创建/修改 -->
    <repo-product-entity-table ref="repoProductEntityTableRef"
                               @delete="handleDeleteDialog"
                               @update="handleUpdateDialog"
                               @deleteComp="handleDeleteComp"
                               @insertComp="handleInsertComp"
                               @updateComp="handleUpdateComp"

    />

    <!-- 设备编辑对话框：创建/修改 -->
    <repo-product-entity-dialog ref="repoProductEntityDialogRef" v-model:visible="editDialog.visible"
                                @cancel="handleCancel"
                                @create="handleCreate"
                                @update="handleUpdate"
    />

    <!-- 设备编辑对话框：创建/修改 -->
    <repo-product-comp-dialog ref="repoProductCompDialogRef" v-model:visible="compDialog.visible"
                              @cancel="handleCompCancel"
                              @create="handleCompCreate"
                              @update="handleCompUpdate"
    />
  </div>
</template>
